<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="filter_head">
        <h2>九宫格抽奖列表</h2>
      </div>
    </div>
    <div class="filter_con ds_block" style="margin-top: 20px">
      <div class="flex_div">
        <el-button v-has size="medium" type="primary" @click="addgift"
          >新增活动</el-button
        >
        <div class="filter_area">
          <!-- <label class="mr_15 mt_15">抽奖活动名称</label>
        <el-input
          type="text"
          placeholder="请输入抽奖活动名称"
          v-model="obj.name"
          show-word-limit
          style="width: 200px"
           class="mr_15"
        ></el-input> -->
          <label class="mr_15">日期</label>
          <el-date-picker
            v-model="prize_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            class="mr_15"
          >
          </el-date-picker>
          <el-button size="medium" @click="search"
            >搜索</el-button
          >
        </div>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          prop="name"
          label="抽奖活动名称"
          width="180"
        ></el-table-column>
        <el-table-column label="抽奖日期">
          <template slot-scope="scope">
            {{ scope.row.start_time }} - {{ scope.row.end_time }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editlist(scope.row.id, scope.row.status)"
              >修改</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status == 0"
              @click="openlist(scope.row.id, 1)"
              >开启</el-button
            >
            <el-button type="text" v-else @click="openlist(scope.row.id, 0)"
              >关闭</el-button
            >
            <el-button type="text" @click="deletelist(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination
          @current-change="ChangeCurrent"
          :page-count="page"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>
<script>
import { getLotteryList, openLottery, deleteLottery } from "@/api/mall/prize";
export default {
  data() {
    return {
      obj: {
        // name: "",
        start_time: "",
        end_time: ""
      },
      objTemp: {},
      page: 1,
      size: 10,
      total: 0,
      tableData: [],
      prize_time: ""
    };
  },
  created() {
    this.search();
  },
  methods: {
    addgift() {
      this.$router.push({
        path: "/grid/item"
      });
    },
    // 搜索
    search() {
      this.obj.start_time = this.prize_time[0];
      this.obj.end_time = this.prize_time[1];
      this.objTemp = Object.assign({}, this.obj);
      this.page = 1;
      this.getList();
    },
    // 获取抽奖活动列表
    getList() {
      let data = {
        ...this.objTemp,
        page: this.page,
        size: this.size,
        style: 1
      };
      getLotteryList(data).then(res => {
        this.tableData = res.msg.data;
        this.total = res.msg.total;
      });
    },
    // 开启抽奖活动
    openlist(id, status) {
      let data = { id, status };
      openLottery(data).then(res => {
        this.$message.success("操作成功!");
        this.getList();
      });
    },
    // 删除抽奖
    deletelist(id) {
      let data = { id };
      deleteLottery(data).then(res => {
        this.$message.success("操作成功!");
        this.getList();
      });
    },
    // 修改抽奖
    editlist(id, status) {
      if (status == 0) {
        this.$router.push({
          path: "/grid/item",
          query: { id: id }
        });
      } else {
        return this.$message.error("请先关闭此抽奖");
      }
    },
    ChangeCurrent(page) {
      this.page = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.filter_head{
  h2{
    margin: 10px 0;
  }
}
.flex_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}
</style>
